<script type="text/javascript" >
    stToolBar.load_tooltip();
    stToolBar.on_submitform('#settingForm');
    function showDiv(id){
        jQuery(id).fadeIn('fast');
    }
    function hideDiv(id){
        jQuery(id).fadeOut('fast');
    }    
    function addClassRequired(element){
        jQuery(element).addClass('required');
    }
    function removeClassRequired(element){
        jQuery(element).removeClass('required');
    }

    function previewToolbar(){
//        alert(jQuery('#settingForm').serialize());
        window.open("<?php echo home_url("/?page={$config['plugin_name']}&action=toolbarPreview")?>"+"&"+jQuery('#settingForm').serialize());
        return false;
    }
</script>
<?php
$showFbSetting = $option['showFbFanPage'] == 0 ? 'none' : 'block';
$showYoutubeSetting = $option['showYoutubePage'] == 0 ? 'none' : 'block';
$showSetting = $option['toolIsShow'] == 0 ? 'none' : 'block';

if(empty($option['youtubeUserName']) && empty($option['youtubeUserId'])){
    $showYoutubeSettingManual = 'block';
    $showYoutubeSettingList = 'block';
    $showYoutubeSettingOr = 'block';
}else{
    if(empty($option['youtubeUserId'])){
        $showYoutubeSettingManual = 'block';
        $showYoutubeSettingList = 'none';
    }else{
        $showYoutubeSettingManual = 'none';
        $showYoutubeSettingList = 'block';
    }
    $showYoutubeSettingOr = 'none';
}
if(empty($option['toolFBPageID']) && empty($option['fbPageID'])){
    $showFbSettingManual = 'block';
    $showFbSettingList = 'block';
    $showFbSettingOr = 'block';
}else{
    if(empty($option['fbPageID'])){
        $showFbSettingManual = 'block';
        $showFbSettingList = 'none';
    }else{
        $showFbSettingManual = 'none';
        $showFbSettingList = 'block';
    }
    $showFbSettingOr = 'none';
}
?>
<div class="w100p bgl">
    <div class="w100p bgr p5b">
        <form class="stform" id="settingForm" action="<?php echo admin_url('/admin.php?page=' . $config['plugin_name'] . '&action=' . $current_action) ?>" method="post" >
            <ul style="width: 600px; float: left">
                <li>
                    <label><?php _e('Show toolbar', $config['plugin_name']); ?>:</label>
                    <div>
                        <input onclick="hideDiv('.setting'); 
                            jQuery('#fbLikeBtn').click();
                            jQuery('#showFbFanPage').click();
                            jQuery('#showYoutubePage').click()
                               " <?php echo $option['toolIsShow'] == 0 ? 'checked' : '' ?> value="0" class="required" name="data[toolIsShow]" type="radio" tabindex="1" />
                        <label><?php _e('No', $config['plugin_name']) ?></label>
                        <input onclick="showDiv('.setting'); "  <?php echo $option['toolIsShow'] == 1 ? 'checked' : '' ?> value="1" class="required" name="data[toolIsShow]" type="radio" tabindex="2" />
                        <label><?php _e('Yes', $config['plugin_name']) ?></label>
                    </div>
                    <br clear="both" />
                </li>
                <div class="setting" style="display: <?php echo $showSetting?>">
                    <li>
                        <label><?php _e('Show Facebook like button ', $config['plugin_name']); ?>:</label>
                        <div>
                            <input <?php echo $option['hasLikeButton'] == 0 ? 'checked' : '' ?> value="0" class="required" name="data[hasLikeButton]" type="radio" tabindex="4" id="fbLikeBtn" />
                            <label><?php _e('No', $config['plugin_name']) ?></label>
                            <input <?php echo $option['hasLikeButton'] == 1 ? 'checked' : '' ?> value="1" class="required" name="data[hasLikeButton]" type="radio" tabindex="5" />
                            <label><?php _e('Yes', $config['plugin_name']) ?></label>
                        </div>
                        <br clear="both" />
                    </li>
                    <li>
                        <label><?php _e('Show Facebook fan page ', $config['plugin_name']); ?>:</label>
                        <div>
                            <input onclick="hideDiv('.FbSetting'); removeClassRequired('#toolFBPageID')" <?php echo $option['showFbFanPage'] == 0 ? 'checked' : '' ?> value="0" class="" name="data[showFbFanPage]" type="radio" tabindex="4" id="showFbFanPage" />
                            <label><?php _e('No', $config['plugin_name']) ?></label>
                            <input onclick="showDiv('.FbSetting'); addClassRequired('#toolFBPageID')" <?php echo $option['showFbFanPage'] == 1 ? 'checked' : '' ?> value="1" class="" name="data[showFbFanPage]" type="radio" tabindex="5" />
                            <label><?php _e('Yes', $config['plugin_name']) ?></label>
                        </div>
                        <br clear="both" />
                    </li>

                    <div class="FbSetting" style="display: <?php echo $showFbSetting ?>">
                        <li class="fbListSetting" style="display: <?php echo $showFbSettingList?>">
                            <label><?php _e('Choose your fan page', $config['plugin_name']) ?>:</label>
                            <div>
                                <select name="data[fbPageID]" id="fbPageID" onchange="
                                        if(this.value != ''){
                                            removeClassRequired('#toolFBPageID');
                                            hideDiv('.fbManualSetting');
                                            showDiv('.manual_page');
                                        }else{
                                            showDiv('.fbManualSetting');
                                            addClassRequired('#toolFBPageID');
                                        }
                                                                            " >
                                    <option value=""><?php _e('Choose your fan page', $config['plugin_name']) ?></option>
                                    <?php
                                    foreach ($pageList as $value) {
                                        if ($option['fbPageID'] == $value->pageid) {
                                            $select = 'selected';
                                        } else {
                                            $select = '';
                                        }
                                    ?>
                                        <option <?php echo $select ?> value="<?php echo $value->pageid ?>"><?php echo $value->pagename ?></option>
                                    <?php
                                    }
                                    ?>
                                </select>
                                <?php if($showFbSettingManual != 'block' || $showFbSettingList != 'block') { ?>
                                <a class="manual_page" href="javascript:" style="color: #EF4624; display: <?php echo $showFbSettingList?>" onclick="
                                        showDiv('.fbManualSetting');
                                        jQuery('#fbPageID').val('');
                                    "
                                    >Manual input page id</a>
                                <?php }else{?>
                                <a class="manual_page" href="javascript:" style="color: #EF4624; display: none" onclick="
                                        showDiv('.fbManualSetting');
                                        jQuery('#fbPageID').val('');
                                    "
                                    >Manual input page id</a>
                                <?php }?>
                            </div>
                            <br clear="both" />
                        </li>
                        <li class="fbManualSetting fbListSetting" style="display: <?php echo $showFbSettingOr?>;">
                            <center>
                                <label style="font-weight: bold; float: none;"><?php _e('--Or--', $config['plugin_name']) ?></label>
                            </center>
                        </li>
                        <li class="fbManualSetting" style="display: <?php echo $showFbSettingManual?>;">
                            <label><?php _e('Facebook pageID ', $config['plugin_name']) ?>:</label>
                            <div class="required">
                                <?php if($showFbSettingManual != 'block' || $showFbSettingList != 'block') { ?>
                                <a class="fan_list" href="javascript:" style="color: #EF4624; display: <?php echo $showFbSettingManual?>" onclick="
                                        showDiv('.fbListSetting');
                                        jQuery('#toolFBPageID').val('');
                                    "
                                    >Show fan page list</a>
                                <?php }else{?>
                                <a class="fan_list" href="javascript:" style="color: #EF4624; display: none" onclick="
                                        showDiv('.fbListSetting');
                                        jQuery('#toolFBPageID').val('');
                                    "
                                    >Show fan page list</a>
                                <?php }?>
                                <input onblur="
                                    if(this.value != ''){
                                        removeClassRequired('#fbPageID');
                                        hideDiv('.fbListSetting');
                                        showDiv('.fan_list');
                                    }else{
                                        showDiv('.fbListSetting');
                                        addClassRequired('#fbPageID');
                                    }" value="<?php echo $option['toolFBPageID'] ?>" class="" name="data[toolFBPageID]" id="toolFBPageID" type="text" tabindex="3" />
                            </div>
                            <br clear="both" />
                        </li>                        
                    </div>
                    <li>
                        <label><?php _e('Show Youtube page ', $config['plugin_name']); ?>:</label>
                        <div>
                            <input onclick="
                                hideDiv('.youtubeSetting');
                                removeClassRequired('#youtubeUserName');
                                removeClassRequired('#youtubePassword');
                                removeClassRequired('#youtubeChannel');
                                removeClassRequired('#youtubeUserId');
                               " <?php echo $option['showYoutubePage'] == 0 ? 'checked' : '' ?> value="0" class="required" name="data[showYoutubePage]" type="radio" tabindex="4" id="showYoutubePage" />
                            <label><?php _e('No', $config['plugin_name']) ?></label>
                            <input onclick="
                                showDiv('.youtubeSetting');
                                addClassRequired('#youtubeUserName');
                                addClassRequired('#youtubePassword');
                                addClassRequired('#youtubeChannel');
                                addClassRequired('#youtubeUserId');
                               " <?php echo $option['showYoutubePage'] == 1 ? 'checked' : '' ?> value="1" class="required" name="data[showYoutubePage]" type="radio" tabindex="5" />
                                   <label><?php _e('Yes', $config['plugin_name']) ?></label>
                        </div>
                        <br clear="both" />
                    </li>
                    <div class="youtubeSetting" style="display: <?php echo $showYoutubeSetting ?>">
                        <li class="listSetting" style="display: <?php echo $showYoutubeSettingList?>">
                            <label><?php _e('Choose your channel', $config['plugin_name']) ?>:</label>
                            <div>
                                <select name="data[youtubeUserId]" id="youtubeUserId" onchange="
                                        if(this.value != ''){
                                            removeClassRequired('#youtubeUserName');
                                            removeClassRequired('#youtubePassword');
                                            removeClassRequired('#youtubeChannel');
                                            hideDiv('.manualSetting');
                                            showDiv('.manual_channel');
                                        }else{
                                            showDiv('.manualSetting');
                                            addClassRequired('#youtubeUserName');
                                            addClassRequired('#youtubePassword');
                                            addClassRequired('#youtubeChannel');
                                        }
                                                                            " >
                                    <option value=""><?php _e('Choose your channel', $config['plugin_name']) ?></option>
                                    <?php
                                    foreach ($userList as $value) {
                                        if ($option['youtubeUserId'] == $value->id) {
                                            $select = 'selected';
                                        } else {
                                            $select = '';
                                        }
                                    ?>
                                        <option <?php echo $select ?> value="<?php echo $value->id ?>"><?php echo $value->user_name ?></option>
                                    <?php
                                    }
                                    ?>
                                </select>
                                <?php if($showYoutubeSettingManual != 'block' || $showYoutubeSettingList != 'block') { ?>
                                <a class="manual_channel" href="javascript:" style="color: #EF4624; display: <?php echo $showYoutubeSettingList?>" onclick="
                                        showDiv('.manualSetting');
                                        jQuery('#youtubeUserId').val('');
                                    "
                                    >Manual input channel</a>
                                <?php }else{?>
                                <a class="manual_channel" href="javascript:" style="color: #EF4624; display: none" onclick="
                                        showDiv('.manualSetting');
                                        jQuery('#youtubeUserId').val('');
                                    "
                                    >Manual input channel</a>
                                <?php }?>
                            </div>
                            <br clear="both" />
                        </li>
                        <li class="manualSetting listSetting" style="display: <?php echo $showYoutubeSettingOr?>;">
                            <center>
                                <label style="font-weight: bold; float: none;"><?php _e('--Or--', $config['plugin_name']) ?></label>
                            </center>
                        </li>
                        <div class="manualSetting" style="display: <?php echo $showYoutubeSettingManual?>">
                        <li >
                            <label><?php _e('Username for YouTube', $config['plugin_name']) ?>:</label>
                            <div>
                                <?php if($showYoutubeSettingManual != 'block' || $showYoutubeSettingList != 'block') { ?>
                                <a class="channel_list" href="javascript:" style="color: #EF4624; display: <?php echo $showYoutubeSettingManual?>" onclick="
                                        showDiv('.listSetting');
                                        jQuery('#youtubeUserName').val('');
                                    "
                                    >Show channel list</a>
                                <?php }else{?>
                                <a class="channel_list" href="javascript:" style="color: #EF4624; display: none" onclick="
                                        showDiv('.listSetting');
                                        jQuery('#youtubeUserName').val('');
                                    "
                                    >Show channel list</a>
                                <?php }?>
                                <input onblur="
                                    if(this.value != ''){
                                        removeClassRequired('#youtubeUserId');
                                        hideDiv('.listSetting');
                                        showDiv('.channel_list');
                                    }else{
                                        showDiv('.listSetting');
                                        addClassRequired('#youtubeUserId');
                                    }
                                       " value="<?php echo $option['youtubeUserName'] ?>" class="" name="data[youtubeUserName]" id="youtubeUserName" type="text"/>
                            </div>
                            
                            <br clear="both" />
                        </li>
                        <li >
                            <label><?php _e('Password', $config['plugin_name']) ?>:</label>
                            <div>
                                <input value="<?php echo $option['youtubePassword'] ?>" class="" name="data[youtubePassword]" id="youtubePassword" type="password"/>
                            </div>
                            <br clear="both" />
                        </li>
                        <li >
                            <label><?php _e('YouTube channel ', $config['plugin_name']) ?>:</label>
                            <div>
                                <input value="<?php echo $option['youtubeChannel'] ?>" class="" name="data[youtubeChannel]" id="youtubeChannel" type="text"/>
                            </div>
                            <br clear="both" />
                        </li>
                        </div>
                    </div>
                </div>
                <li>
                    <input type="submit" value="Submit"/>
                    <a href="javascript:" onclick="previewToolbar()" class="button"> <?php _e('Preview', $config['plugin_name']) ?> </a>
                </li>

            </ul>
            
            <div style="float: left">
                <label><b><?php _e('Javascript to generate the toolbar', $config['plugin_name']) ?>:</b></label>
                <br /><br />
                <textarea class="required" cols="100" rows="15"
                id="description_sample" ><script id="stConnectionToolbar" type="text/javascript" src="http://demo.socialmediatoolbox.no/toolbarLoad/stConnection.js?<?php echo base64_encode(get_current_user_id())?>"></script></textarea>
            </div>
            <br clear="both" />
        </form>
    </div>
</div>